<template>
  <van-tabbar v-if="showTabbar" route v-model="active">

    <van-tabbar-item replace to="/home">
      <span>题库</span>
      <template #icon="props">
        <!-- <img :src="props.active ? icon1.active : icon1.inactive" /> -->
        <van-icon name="column" :color="props.active ? '#0074FF' : '#888888'" />
      </template>
    </van-tabbar-item>

    <van-tabbar-item replace to="/question">
      <span>练题</span>
      <template #icon="props">
        <img :src="props.active ? icon1.active : icon1.inactive" />
      </template>
    </van-tabbar-item>

    <van-tabbar-item replace to="/case">
      <span>案例</span>
      <template #icon="props">
        <img :src="props.active ? icon4.active : icon4.inactive" />
      </template>
    </van-tabbar-item>

    <van-tabbar-item replace to="/exam">
      <span>考试</span>
      <template #icon="props">
        <van-icon name="records" :color="props.active ? '#0074FF' : '#888888'" />
      </template>
    </van-tabbar-item>

    <van-tabbar-item replace to="/search">
      <span>搜索</span>
      <template #icon="props">
        <van-icon name="search" :color="props.active ? '#0074FF' : '#888888'" />
        <!-- <img :src="props.active ? search.active : search.inactive" /> -->
      </template>
    </van-tabbar-item>

    <van-tabbar-item replace to="/my">
      <span>我的</span>
      <template #icon="props">
        <img :src="props.active ? icon5.active : icon5.inactive" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  name: 'Footer',
  props: {
    msg: String
  },
  data() {
    return {
      showTabbar: true,
      active: '/home',
      icon1: {
        active: '/images/tab_ke1.png',
        inactive: '/images/tab_ke.png',
      },
      icon2: {
        active: '/images/tab_wen1.png',
        inactive: '/images/tab_wen.png',
      },
      icon3: {
        active: '/images/tab_xuexi1.png',
        inactive: '/images/tab_xuexi.png',
      },
      icon4: {
        active: '/images/tab_dati1.png',
        inactive: '/images/tab_dati.png',
      },
      icon5: {
        active: '/images/tab_my1.png',
        inactive: '/images/tab_my.png',
      },
      search: {
        active: '/images/exam_4.png',
        inactive: '/images/exam_4.png',
      }
    }
  },
  mounted() {

  },
  methods: {
  }
}
</script>
